<template>
  	<div class="used-line-page">
      <div class="line">
        <span class="line-icon"></span>
        <span class="line-font">常用路线</span>
        <span class="clear-line-font" v-on:click="clearLine()">清空路线</span>
      </div>

      <div class="line-list" v-for="item in usedLineData" v-on:click="lineDetails(item)" v-show="isShowLineList">
        <span class="line-name">{{item.name}}</span>
        <span class="line-directin">{{item.direction}}</span>
        <img class="right-icon" src="../../assets/image/right-arrow-icon.png">
      </div>

      <div class="pop-up-div" v-show="isPopUp">
        <div class="clear-sure"><span>是否确定清空路线？</span></div>
        <div class="clear-cancel">
          <div style="width: 50%;display:flex;float: left;color: #666666;" v-on:click="clearCancel()"><span>取消</span></div>
          <div style="width: 50%;display:flex;float: left;border: 1px solid #f7f7f7;color: #fe952c;" v-on:click="clearSure()"><span>确定</span></div>
        </div>

      </div>
      <div class="mask-body" v-show="isMask"></div>
    </div>
</template>

<script>
export default {
  props: {
    usedLineData: {
      type: Object
    }
  },
  data () {
    return {
      isPopUp: false,
      isMask: false,
      isShowLineList: true
    };
  },
  methods: {
    /*
    进入线路详情
    */
    lineDetails: function (item) {
      var data = {};
      data.routeName = item.name;
      data.direction = item.direction;
      data.areacode = item.areacode;
      data.updown = item.updown;
      this.$storage.setStorage('lineDetails', data);
      var routerPath = '/lineDetails/';
      this.$router.push({path: routerPath});
    },
    /*
    清空线路
    */
    clearLine: function () {
      this.isPopUp = true;
      this.isMask = true;
    },
    /*
    确认清除
     */
    clearSure: function () {
      var param = {};
      this.isPopUp = false;
      this.isMask = false;
      var vueObj = this;
      this.$baseService.getData(vueObj.$global.API_USER_ROUTE_CLEAN, param, function (data) {
        vueObj.isShowLineList = false;
        vueObj.$storage.setStorage('usedLineData', null);
      });
    },
    /*
    取消清除
     */
    clearCancel: function () {
      this.isPopUp = false;
      this.isMask = false;
    }
  }
};
</script>

<style scoped>

  .used-line-page {
    margin-top:0.26rem;
    background-color: #ffffff;
  }

  .line {
    display: flex;
  }

  .line-list {
    display: flex;
    border-top: 1px solid #f7f7f7;
    margin-left: 0.4rem;
  }

  .line-icon {
    background-color: #FE952C;
    width: 0.08rem;
    height: 0.4rem;
    margin: 0.4rem 0.32rem 0.4rem 0px;
  }

  .line-font{
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
    height: 0.42rem;
    margin: 0.4rem 0px 0.4rem 0px;
    flex: 1;
  }

  .clear-line-font {
    font-size: 0.37rem;
    color: #fe952c;
    align-self: center;
    margin-right: 0.4rem;
    height: 0.42rem;
  }

  .line-name{
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
    height: 0.42rem;
    margin: 0.4rem 0px 0.4rem 0px;
  }

  .line-directin {
    margin-left: 0.26rem;
    font-size: 0.37rem;
    color: #666666;
    align-self: center;
    height: 0.42rem;
    flex: 1;
  }

  .right-icon {
    width: 0.21rem;
    height: 0.37rem;
    align-self: center;
    margin-right: 0.4rem;
  }

  .pop-up-div {
    position: absolute;
    top: 40%;
    left: 12%;
    width: 76%;
    height: 20%;
    border-radius: 4px;
    border: 1px solid #f7f7f7;
    background-color: #ffffff;
    z-index:1002;
  }

  .clear-sure {
    height: 55%;
    color: #333333;
    font-size: 0.37rem;
    border-bottom: 1px solid #f7f7f7;
    display:flex;
  }

  .clear-sure span {
    margin: auto;
  }

  .clear-cancel {
    height: 45%;
    font-size: 0.4rem;
    display:flex;
  }

  .clear-cancel span {
    margin: auto
  }

  .mask-body{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    opacity:.5;
  }

</style>
